<template>
  <div class="demo-image">
    <div class="mephotoTop" ref="top">
      <el-button size="small" round @click="open" class="createAblum">
        <i class="iconfont iconadd-fill"></i>添加分类</el-button
      >
      <transition name="el-zoom-in-top">
        <ul class="controlAlbum" v-show="firstChose">
          <li @click="deleteMessage">
            <i class="iconfont iconhuishouzhan"></i><span>删除相册</span>
          </li>
          <li @click="changeSort">
            <i class="iconfont iconzhongmingming"></i><span>更改分类</span>
          </li>
          <li @click="download">
            <i class="iconfont iconxiazai"></i><span>下载</span>
          </li>
        </ul>
      </transition>
    </div>

    <div class="center scrollbar size" id="style-2">
      <div class="peopleHead">
        <ul class="clearfix ulfather">
          <li v-for="faces in faceData" :key="faces.faceId">
            <div class="imgs" @click="intoNext(faces.faceName, faces.images)">
              <img :src="$store.state.baseHttp + faces.facePath" alt="" />
            </div>
            <el-input
              type="text"
              @blur="loseBlur(faces.faceId, $event)"
              placeholder="这是谁？"
              v-model="faces.faceName"
            >
            </el-input>
          </li>
        </ul>
      </div>
      <div class="ablum clearfix" v-if="!ishow">
        <div
          class="album"
          v-for="(item, index) in photosort"
          :key="item.ablumid"
        >
          <el-image
            style="width: 200px; height: 180px"
            :src="item.src"
            fit="cover"
            @click="intoNext(item.name, item.value)"
          ></el-image>
          <i
            class="iconfont iconbianji"
            @click.stop="edit(item, index)"
            :class="{ showIcon: inne == index }"
          ></i>
          <h4>{{ item.name }}</h4>
        </div>
      </div>
    </div>
    <changesort @openChange="changeSort" @close="closeWindows"></changesort>
  </div>
</template>

<script>
import changesort from "./ChangeSort.vue";
export default {
  data() {
    return {
      // 人脸聚合分类
      faceData: [],
      inne: null,
      ishow: false, //是否进入相册
      firstChose: false, //是否展示编辑栏
      photosort: [], //存放的相册
      actionAblum: null, //选中的相册的id
      AblumName: "",
      imgArr: [],
      ishowSort: true,
    };
  },
  components: {
    changesort,
  },
  created() {
    this.getFace();
  },
  activated() {
    this.getFace();
  },
  methods: {
    //人脸命名
    loseBlur(faceId, event) {
      let Cdata = this.$smartClass.CchangeFaceName(faceId, event.target.value);
      console.log(Cdata);
      this.$http.put("/api/v1/ai/faces", Cdata).then((res) => {
        console.log(res);
      });
    },
    //更换分类
    changeSort() {
      this.ishowSort = true;
    },
    closeWindows() {
      this.ishowSort = false;
    },
    //获取相册
    getFace() {
      this.$http.get("/api/v1/ai/faces").then((res) => {
        let Ddata = this.$smartClass.DfaceSort(res.data);
        this.faceData = Ddata;
      });
    },
    //弹出框
    open() {
      this.$prompt("请输入相册名", "创建相册", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          //处理重名相册问题
          let bool = true;
          this.photosort.map((item) => {
            if (item.name == value) {
              bool = false;
              return false;
            }
          });
          return bool;
        },
        inputErrorMessage: "已存在重名相册！",
      })
        .then(({ value }) => {
          this.creatAlbum(value);
          this.$message({
            type: "success",
            message: "相册创建成功: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 添加新分类
    creatAlbum(value) {
      this.changeSort();
    },
    //进入相册
    intoNext(title, data) {
      console.log(title, data);
      this.$router.push({
        name: "showSamrt",
        params: {
          data: [
            {
              title: title,
              photoes: data,
            },
          ],
        },
      });
    },
    //返回上一级
    back() {
      this.ishow = !this.ishow;
    },
    //编辑
    edit(ablum, index) {
      if (this.inne == index) {
        this.inne = null;
        this.firstChose = false;
        this.actionAblum = null;
        return;
      }
      this.actionAblum = ablum;
      this.inne = index;
      this.firstChose = true;
      let top = this.$refs.top;
      let that = this;
      window.onclick = function (event) {
        //点击外部关闭
        console.log(event.target);
        // console.log(document.querySelector('.clearfix'))
        if (
          document.querySelector(".ulfather") == event.target ||
          document.querySelector(".ablum") == event.target
        ) {
          that.inne = null;
          that.firstChose = false;
        }
      };
    },
    //删除相册
    deleteAlbum() {
      this.$http
        .delete("/api/ablum/" + this.actionAblum.ablumId)
        .then((res) => {
          if (res.status == 204) {
            //取消编辑
            this.inne = null;
            this.firstChose = false;

            this.getAlbum(); //重新渲染
            this.$message({
              message: this.actionAblum.name + " 删除成功!",
              type: "success",
            });
          }
        })
        .catch((err) => {
          this.$message.error("删除失败!");
        });
    },
    //下载
    download() {},
    deleteMessage() {
      this.$confirm("此操作将删除该相册及相册内照片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAlbum();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    renameReauest(value) {
      let data = {
        Name: value,
      };
      this.$http
        .patch("/api/ablum/" + this.actionAblum.ablumId, data)
        .then((res) => {
          if (res.status == 204) {
            this.inne = null; //取消编辑
            this.firstChose = false;
            this.getAlbum(); //重新渲染
          }
        });
    },
  },
};
</script>

<style scoped="scoped">
.imgs {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}
.size {
  height: calc(100% - 50px);
}
.center .ablum {
  margin-top: 80px;
}
.peopleHead ul li {
  float: left;
  width: 120px;
  height: 150px;
  margin-left: 20px;
}
.peopleHead ul li img {
  width: 120px;
  height: 120px;
  cursor: pointer;
}
.peopleHead ul li .el-input {
  width: 80px;
  height: 30px;
  background-color: #f4f4f5;
  color: #909399;
  font-family: "zhengkan";
  margin-top: 10px;
  text-align: center;
}
.peopleHead >>> .el-input__inner {
  height: 30px;
  text-align: center;
}
.iconadd-fill {
  margin-right: 10px;
  font-size: 20px;
  vertical-align: middle;
}
.demo-image {
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
  height: calc(100% - 60px);
}
.gridGroup {
  width: 180px;
  height: 180px;
  display: grid;
  grid-template-columns: repeat(2, 50%); /* 和列分布 */
  grid-template-rows: repeat(2, 50%);
  overflow: hidden;
  border-radius: 100%;
  grid-row-gap: 5px; /* 行间距 */
  grid-column-gap: 5px; /* 列间距 */
}
.grid {
  display: grid;
}
.smartClassify >>> .el-image {
  border-radius: 0;
}
.mephotoTop {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #f1f6fa;
}
.createAblum {
  position: absolute;
  top: 5px;
  right: 20px;
  vertical-align: middle;
  font-size: 16px;
}
.center {
  width: 100%;
  box-sizing: border-box;
  padding: 28px;
}
.album {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin-left: 50px;
  margin-bottom: 30px;
  cursor: pointer;
}
.album:nth-child(4n + 1) {
  margin-left: 0;
}
.album:hover .iconbianji {
  opacity: 1;
}
.iconbianji {
  cursor: pointer;
  position: absolute;
  bottom: 23px;
  right: 10px;
  font-size: 20px;
  background-color: #989898;
  padding: 6px;
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s;
}
.showIcon {
  opacity: 1;
}
.album h4 {
  margin-top: 5px;
  user-select: none;
}

.el-image {
  overflow: hidden;
  border-radius: 20px;
}

.el-image >>> img {
  display: block;
}

.hiddens::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.controlAlbum {
  margin-top: 14px;
}

.controlAlbum li {
  float: left;
  font-size: 16px;
  margin-left: 20px;
  cursor: pointer;
}

.controlAlbum i {
  margin-right: 3px;
  font-size: 16px;
}

.controlAlbum li:hover {
  color: #f5d3ef;
}
</style>
